<template>
  <div class="sjht-detail-item" :class="{ 'is-bold': bold }">
    <div class="sjht-detail-title" v-text="title"></div>
    <div class="sjht-detail-content">
      <slot>{{ content }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SjhtDetailItem',

  props: {
    title: {
      type: String,
      default: null
    },
    content: {
      type: [String, Number],
      default: null
    },
    bold: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
.sjht-detail {
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.35;
    font-size: 14px;
    padding: 6px 0;
  }
  &-title {
    flex-shrink: 0;
    color: #999;
  }
  &-content {
    flex: 1 1 0%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 6px;
  }
}
.is-bold {
  .sjht-detail-title,
  .sjht-detail-content {
    font-weight: bold;
    color: #333;
  }
}
</style>
